<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>1688信息站</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <!-- 标签页图标 -->
    <link rel="shortcut icon" href="/images/icon/menu_title_1.jpg" type="image/x-icon"/>
    <style>

    </style>
</head>
<script src="/js/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/jquery.js" charset="utf-8"></script>
<script src="/js/localStorage.js" charset="utf-8"></script>
<body>


<!--<div id="menu_select" class="layui-input-block layui-form">
    <input type="radio" name="shop" value="0" title="选择菜单">
    <input type="radio" name="shop" value="0" title="选择菜单">
</div>-->

<div id="menu" hidden="hidden" style="margin-bottom: 200px;">
    <button id="create_1688" class="layui-btn layui-btn-normal"
            style="display: block;margin-left: 0px;width: 100%;margin-bottom: 10px;" onclick="create_1688()">生成1688同款
    </button>
    <button id="create_tao_bao" class="layui-btn layui-btn-normal"
            style="display: block;margin-left: 0px;width: 100%;margin-bottom: 10px;" onclick="create_tao_bao()">
        生成淘宝&天猫同款
    </button>
    <button id="show_1688_detail" class="layui-btn layui-btn-primary"
            style="display: block;margin-left: 0px;width: 100%;margin-bottom: 10px;" onclick="show_1688_detail()">
        查看1688同款
    </button>
    <button id="show_tao_bao_detail" class="layui-btn layui-btn-primary"
            style="display: block;margin-left: 0px;width: 100%;margin-bottom: 10px;" onclick="show_tao_bao_detail()">
        查看淘宝&天猫同款
    </button>
    <button id="delete_shop" class="layui-btn layui-btn-danger"
            style="display: block;margin-left: 0px;width: 100%;margin-bottom: 10px;" onclick="delete_shop()">删除
    </button>
</div>

<table id="list" class="layui-table layui-form">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead id="thead">
    </thead>
    <tbody id="tbody">
    </tbody>
</table>
<!--<div style="margin-top: 400px;"></div>-->
</body>

<script>

    var titleCount = 0;//显示的值
    var count = 0;//总记录数
    var isStreamLoad = true;//是否是第一次加载列表
    var pageSize = 20;//页面大小
    var pageCount = 0;//总页数

    $(function () {
        listHead();
        listCount();
        //流加载
        list(1, pageSize);
    });

    //流加载
    function streamLoad() {
        layui.use('flow', function () {
            var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            var flow = layui.flow;
            flow.load({
                elem: '#list' //指定列表容器
                , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                    if (page != 1) {
                        list(page, pageSize);
                        isStreamLoad = false;
                    }
                    next('', page < pageCount);
                }
            });
        });
    }


    //count
    function listCount() {
        //提交
        $.ajax({
            url: serverURL + "/collector/collectList_1688_count",
            type: "GET",
            async: false,
            data: {
                userId: getLocalObject("user").id
            },
            success: function (data) {
                count = data.data;
                pageCount = Math.ceil(count / pageSize);
            },
            error: function (e) {
                console.log(e)
            }
        });
    }

    function create_tao_bao() {
        $(this).attr('disabled', "true");
        //提交
        $.ajax({
            url: serverURL + "/collector/saveSearchImageShopUrl_tao_bao",
            type: "POST",
            async: true,
            data: {
                userId: sessionStorage.userId,
                shopId: sessionStorage.shopId,
                shopUrl: sessionStorage.shopUrl,
                imgUrl: sessionStorage.imgUrl,
            },
            success: function (data) {
                layer.msg(data.meta);
            },
            error: function (e) {
                console.log(e)
            }
        });
    }

    function create_1688() {
        $(this).attr('disabled', "true");
        //提交
        $.ajax({
            url: serverURL + "/collector/saveSearchImageShopUrl_1688",
            type: "POST",
            async: true,
            data: {
                userId: sessionStorage.userId,
                shopId: sessionStorage.shopId,
                shopUrl: sessionStorage.shopUrl,
                imgUrl: sessionStorage.imgUrl,
            },
            success: function (data) {
                layer.msg(data.meta);
            },
            error: function (e) {
                console.log(e)
            }
        });
    }

    function show_1688_detail() {
        openItemList("LIST_DETAILS_1688", sessionStorage.shopId);
    }

    function show_tao_bao_detail() {
        openItemList("LIST_DETAILS_TAO_BAO", sessionStorage.shopId);
    }

    function delete_shop() {
        $(this).attr('disabled', "true");
        //提交
        $.ajax({
            url: serverURL + "/collector/deleteShop",
            type: "POST",
            async: false,
            data: {
                shopId: sessionStorage.shopId,
            },
            success: function (data) {
                layer.msg(data.meta);
                parent.location.reload();
            },
            error: function (e) {
                console.log(e)
            }
        });
    }


    //生成table的表头
    function listHead() {
        $.ajax({
            url: serverURL + "/collector/fieldList",
            type: "GET",
            async: false,
            data: {},
            success: function (data) {
                $("#thead").append("<th>菜单</th>");
                for (var i = 0; i < data.data.length; i++) {
                    var currentData = data.data[i];//eval('(' + data.data[i] + ')');
                    var element = getJointElement("<th>", currentData.fieldName, "</th>");
                    $("#thead").append(element);
                }
                //$("#thead").append("<th>操作</th>");

            },
            error: function (e) {
                console.log(e)
            }
        });
    }

    //生成table的主体
    function list(currentPage, limit) {
        var userId = getLocalObject("user").id;
        $.ajax({
            url: serverURL + "/collector/collectList_1688",
            type: "GET",
            async: true,
            data: {
                userId: userId,
                currentPage: currentPage,
                limit: limit
            },
            success: function (data) {
                if (data.data == null) {
                    layer.msg(data.meta);
                    return;
                }

                for (var i = 0; i < data.data.length; i++) {
                    var menuButton;
                    menuButton = getJointElement("<button menuButton='menuButton' ", "userId='", userId, "' ", "shopId='", data.data[i].id, "' ");
                    var currentData = data.data[i].collectDtoList;
                    var trList = "<tr id='trId_" +
                        titleCount +
                        "'>";
                    trList = getJointElement(trList,
                        "<td>",
                        '<input type="radio" name="shop" value="',
                        titleCount,
                        '" title="',
                        (titleCount + 1),
                        '">',
                        "</td>");
                    for (var x = 0; x < currentData.length; x++) {
                        var currentFieldData = currentData[x];
                        if (currentFieldData.fieldName == '图片') {
                            var valueArray = currentFieldData.value.split(";");
                            //加载图片
                            var imgElement = getJointElement("<div id='layui-img-",
                                titleCount,
                                "' class='layer-photos-demo'>"
                            );
                            for (var j = 0; j < valueArray.length - 1; j++) {
                                var colorImage = valueArray[j];
                                var big = colorImage;
                                var little = colorImage;
                                for (var z = 0; z <= 400; z += 2) {
                                    var replaceValue = z + "x" + z;
                                    big = big.replace(replaceValue, bigValue);
                                    little = little.replace(replaceValue, littleValue);
                                }
                                colorImage = little;
                                var colorImage_big =big ;
                                imgElement += getJointElement(
                                    "<img layer-src='",
                                    colorImage_big,
                                    "' src='",
                                    colorImage,
                                    "' alt='图片-",
                                    j + 1,
                                    "'> "
                                );
                                if (j == 0) {
                                    menuButton = getJointElement(menuButton, currentFieldData.fieldName, "='", colorImage_big, "' ");
                                }
                            }
                            trList = getJointElement(trList, "<td>", imgElement, "</td>");
                        } else {
                            var value = currentFieldData.value;
                            if (currentFieldData.fieldName == '商品网址') {
                                value = getJointElement("<a target='_blank' href='", value, "' >", "跳转", "</a>");
                                //console.log(value)
                            }
                            var element = getJointElement("<td>", value, "</td>");
                            trList = getJointElement(trList, element);
                            menuButton = getJointElement(menuButton, currentFieldData.fieldName, "='", currentFieldData.value, "' ");
                        }

                    }

                    menuButton = getJointElement("<td>", menuButton, ">", "</button>", "</td>");
                    trList = getJointElement(trList, menuButton);
                    //隐藏按钮
                    menuButton = "";

                    $("#tbody").append(trList);

                    //隐藏按钮
                    var buttonTdSelect = "#trId_" + titleCount + " td:last";
                    $(buttonTdSelect).hide();

                    //加载相册模块
                    //查看图片
                    layer.photos({
                        photos: '#layui-img-' + titleCount++
                        , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });
                }
                //注意：导航 依赖 element 模块，否则无法进行功能性操作
                layui.use('element', function () {
                    var element = layui.element;
                    var form = layui.form;

                    element.init();

                    //点击事件
                    form.on('radio', function (data) {
                        //console.log(data.elem); //得到radio原始DOM对象
                        //console.log(data.value); //被点击的radio的value值
                        //选中的下标
                        var currentCheckedValue = data.value;
                        var shopUrl = $("button[menuButton='menuButton']").eq(currentCheckedValue).attr("商品网址");
                        var userId = $("button[menuButton='menuButton']").eq(currentCheckedValue).attr("userId");
                        var shopId = $("button[menuButton='menuButton']").eq(currentCheckedValue).attr("shopId");
                        var imgUrl = $("button[menuButton='menuButton']").eq(currentCheckedValue).attr("图片");

                        sessionStorage.shopUrl = shopUrl;
                        sessionStorage.userId = userId;
                        sessionStorage.shopId = shopId;
                        sessionStorage.imgUrl = imgUrl;
                        sessionStorage.checkedValue = currentCheckedValue;

                        /*   console.log(sessionStorage.shopUrl);
                           console.log(sessionStorage.userId);
                           console.log(sessionStorage.shopId);
                           console.log(sessionStorage.imgUrl);*/
                        //下标位置显示弹出菜单

                        //最后一个弹出菜单
                        if ((parseInt(currentCheckedValue) + 1) == count) {
                            currentCheckedValue--;
                        }
                        layer.open({
                            type: 4,
                            content: [$("#menu").html(), $("tr:eq(" + currentCheckedValue + ") td:eq(1)")] //数组第二项即吸附元素选择器或者DOM
                            , closeBtn: 0,
                            shadeClose: true
                        });

                        $("button").attr('disabled', false);
                    });
                    form.render();
                });
                //流加载
                if (isStreamLoad)
                    streamLoad();
            },
            error: function (e) {
                console.log(e)
            }
        });
    }


    function openItemList(category, shopId) {
        window.open("/v1.0/itemList?category=" + category + "&shopId=" + shopId, "_blank");
    }
</script>
</html>